import '../scss/index.scss'

import Header from '../components/header/index'
import Nav from '../components/nav/index'
import NewsItem from '../components/news_item/index'
import PageLoading from '../components/page_loading/index'
import BottomTip from '../components/bottom_tip/index'
import ErrorTip from '../components/error_tip/index'

import { IndexModel } from '../models/index'

import tools from '../utils/tools.js'
import data from '../utils/data.js'

const header = new Header(),
			nav = new Nav(),
			newsItem = new NewsItem(),
			pageLoading = new PageLoading(),
			bottomTip = new BottomTip(),
			errorTip = new ErrorTip()

const indexModel= new IndexModel()

// 声明App函数，$为形参
const App = ($, win) => {
	// 	跟jquery语法相似
	const $app = $('#app'),
				$window = $(win),
				$list = $app.children('.list'),
				newScrollToBottom = tools.scrollToBottom.bind(null, scrollToBottom)

	let field = 'top',
			pageNum = 0,
			pageCount = 0,
			dataCache = {},
			showCount = 10,
			bottomLock = false

	const init = () => {
		render(field, pageNum, showCount).then(bindEvent)
	}

	const render = (field, pageNum, showCount) => {
		return new Promise((resolve, reject) => {
			_renderHeader()
			_renderNav(data.news_type)
			_renderList(field, pageNum, showCount)
			resolve()
		})
	}

	const bindEvent = () => {
		$('.nav .nav-wrapper').on('click', '.item', navSelect)
		$list.on('click', '.news_item', toDetailPage)
	}

	const _renderHeader = () => {
		$app.append(header.tpl({
			title: "新闻头条",
			showLeftIcon: false,
			showRightIcon: true
		}))
	}
	
	const _renderNav = (newsType) => {
		const tpls = nav.tpl(newsType)
		$app.append(tpls.navStr)
		$('.nav .nav-wrapper').append(tpls.itemStr)
	}

	const _renderList = (field, pageNum, showCount) => {
		if (dataCache[field]) {
			pageCount = dataCache[field].length
			_insertList('cover')
		} else {
			_handlePageLoading('append')
			indexModel.getNewsList(field, showCount).then(res => {
				if (res == 404) {
					_handleErrorTip('append', '没有找到网络')
					_handlePageLoading('remove')
					return 
				}
				dataCache[field] = res
				pageCount = dataCache[field].length
				setTimeout(() => {
					_insertList('cover')
				}, 1000)
			})
		}
	}

	const _insertList = (method) => {
		switch (method) {
			case 'cover':
				$list.html(newsItem.tpl(dataCache[field][pageNum], pageNum))
				_scrollToTop(150)
				_handlePageLoading('remove')
				_afterRender(true)
				break
			case 'append':
				$list.append(newsItem.tpl(dataCache[field][pageNum], pageNum))
				_afterRender(false)
		}

		bottomLock = false
		_handleBottomTip('remove')
	}

	const _afterRender = (bindScroll) => {
		bindScroll && _handleScrollEvent(true)
		tools.thumbShow($('.news-thumb'))
	}

	const _handlePageLoading = (how) => {
		switch (how) {
			case 'append':
				$list.html('')
				$app.append(pageLoading.tpl())
				break
			case 'remove':
				$('.loading-icon').remove()
				break
			default:
				break
		}
	}

	const _handleBottomTip = (how, isLoading, text) => {
		switch(how) {
			case 'append':
				$app.append(bottomTip.tpl(isLoading, text))
				break
			case 'remove':
				$('.bottom-tip').remove()
				break
			case 'removeAndAppend':
				$('.bottom-tip').remove()
				$app.append(bottomTip.tpl(isLoading, text))
				break
			default: 
				break
		}
	}

	const _scrollToTop = (delay) => {
		setTimeout(() => win.scrollTo(0,0), delay)
	}

	const _handleScrollEvent = (isBind) => {
		isBind ? $window.on('scroll', newScrollToBottom)
					 : $window.off('scroll', newScrollToBottom)
	}

	const _handleErrorTip = (how, text) => {
		switch (how) {
			case 'append': 
				$app.append(errorTip.tpl(text))
				break
			case 'remove': 
				$('error_tip').remove()
				break
			default:
				break
		}
	}

	function navSelect() {
		pageNum = 0
		_handleErrorTip('remove')
		_handleBottomTip('remove')
		_scrollToTop(150)
		_handleScrollEvent(false)
		
		const $this = $(this)
		field = $this.attr('data-type')
		$this.addClass('current').siblings('.item').removeClass('current')
		_renderList(field, pageNum, showCount)
	}

	function scrollToBottom() {
		if (pageNum < pageCount -1) {
			if(!bottomLock) {
				bottomLock = true
				_handleBottomTip('append', 'loading', '正在努力加载中')

				setTimeout(() => {
					pageNum++
					_insertList('append')
				}, 1000)
			}
		} else {
			_handleBottomTip('removeAndAppend', 'final', '已加载完所有内容')
		}
	}

	function toDetailPage() {
		const $this = $(this),
					url = $this.attr('data-url'),
					index = $this.attr('data-index'),
					pageNum = $this.attr('data-page')
				
		localStorage.setItem('target', JSON.stringify(dataCache[field][pageNum][index]))
		window.location.href = `detail.html?news_url=${url}&uniquekey=${dataCache[field][pageNum][index].uniquekey}`
	}

	init()
}

// 执行App
// Zepto注入App箭头函数的作用域，作为局部变量,避免访问全局作用域（防止污染全局变量）
App(Zepto, window)